<!-- 门店入驻 -->
<template>
	<view class="apply-commission-wrap page_box">
		<!-- 标题栏 -->
		<view class="head-box">
			<shopro-navbar back-icon-color="#fff" :background="{}"></shopro-navbar>
		</view>

		<!-- 表单 -->
		<view class="apply-form content_box">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="商家名称" prop="name">
					<u-input placeholder="请输入商家名称" :placeholderStyle="placeholderStyle" v-model="model.shop_name" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="商家地址" prop="area">
					<u-input placeholder="请输入商家地址" :placeholderStyle="placeholderStyle" v-model="model.shop_address" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="行业类别" prop="openhours">
					<u-input type="select" :select-open="showCate" v-model="catelabel" placeholder="请选择行业类别" :placeholderStyle="placeholderStyle"
					 @click="onSelectCate()"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="联系人" prop="realname">
					<u-input placeholder="请输入联系人" :placeholderStyle="placeholderStyle" v-model="model.realname" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-position="left" label="手机号" prop="phone" label-width="150">
					<u-input placeholder="请输入手机号" :placeholderStyle="placeholderStyle" v-model="model.shop_mobile" type="number"></u-input>
				</u-form-item>
				<view class="u-flex u-row-center u-col-center"><button class="u-reset-button save-btn" @tap="onSubmit" :disabled="isFormEnd">确认提交</button></view>
			</u-form>
		</view>

		<u-select v-model="showCate" label-name="name" value-name="store_cate_id"  :list="storeCateList" @confirm='confirmCate'></u-select>
		<!-- 权限验证 -->
		<u-popup v-model="showNotice" mode="center" border-radius="20">
			<view class="notice-modal">
				<view class="img-wrap">
					<image class="notice-img" :src="authNotice.img" mode=""></image>
				</view>
				<view class="notice-title">{{ authNotice.title }}</view>
				<view class="notice-detail">{{ authNotice.detail || '' }}</view>
				<button class="u-reset-button notice-btn" @tap="onAuthBtn(authNotice.btnPath)">{{ authNotice.btnText }}</button>
				<button class="u-reset-button back-btn" @tap="$Router.back()">返回</button>
			</view>
		</u-popup>
		<u-toast ref="submitAudit"></u-toast>
		<u-modal :value="showAudit" :show-confirm-button="true" @confirm="confirmAudit" :confirm-color="'#FFFFFF'"
		 :confirm-style="confirmStyle" :confirm-text="'我知道了'" :title="' '">
			<view class="slot-content">
				<view class="audit_img">
					<image class="audit_img_top" src="https://d-duomi.bigchun.com/images/5c8352de0bcc21.png"></image>
				</view>
				<view class="audit_title">入驻信息审核中</view>
				<view class="audit_sub_title">请耐心等待工作人员审核</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import Auth from '@/shopro/permission/index.js';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		MAP_KEY
	} from '@/env.js';
	export default {
		components: {},
		data() {
			return {
				catelabel:"",
				storeCateList:[],
				confirmStyle: {
					'width': '69%',
					'margin': '40rpx auto',
					'background': '#D9D9D9 linear-gradient(90deg, #FC5351 0%, #FF6E6D 100%)',
					'border-radius': '60rpx',
					'flex': 'inherit'
				},
				showAudit: false,
				showNotice: false,
				showWeeksModal: false, //星期弹窗
				isFormEnd: false,
				showCate: false,
				weekcheckbox: [{
						value: '1',
						name: '周一',
						checked: false
					},

					{
						value: '2',
						name: '周二',
						checked: false
					},
					{
						value: '3',
						name: '周三',
						checked: false
					},
					{
						value: '4',
						name: '周四',
						checked: false
					},
					{
						value: '5',
						name: '周五',
						checked: false
					},
					{
						value: '6',
						name: '周六',
						checked: false
					},
					{
						value: '7',
						name: '周日',
						checked: false
					}
				],
				authNotice: {},
				// 表单
				errorType: ['message'],
				selectShow: false,
				selectMode: 'mutil-column', // single-column, mutil-column, mutil-column-auto
				selectType: '',
				selectList: [],
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '500',
					color: '#333'
				},
				placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
				model: {
					shop_name: '', //门店名称
					shop_mobile: '', //手机号
					realname: '', //真实姓名
					openhours: '', //营业时间
					openweeks: '', //营业周期
					shop_address: '',
					area_id: '', //行政区域ID
					latitude: '', //纬度
					longitude: '', //京都
					reg_cate:""
				},
				rules: {
					shop_name: [{
						required: true,
						message: '请输入商家名称',
						trigger: ['change', 'blur']
					}],
					realname: [{
						required: true,
						message: '请输入联系人',
						trigger: ['change', 'blur']
					}],
					shop_address: [{
						required: true,
						message: '请填写商家地址',
						trigger: ['change', 'blur']
					}],
					shop_mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur']
						}
					],
					reg_cate: [{
						required: true,
						message: '请选择行业类别',
						trigger: ['change', 'blur']
					}],
				}
			};
		},
		computed: {
			...mapGetters(['initStore']),
			selectWorkerTime() {
				let mArr = [];
				for (let i = 0; i <= 24; i++) {
					let t = String(i).padStart(2, '0');
					mArr.push({
						value: `${t}:00`,
						label: `${t}:00`
					}, {
						value: `${t}:30`,
						label: `${t}:30`
					});
				}
				mArr.pop();
				return [mArr, mArr];
			}
		},
		onLoad() {
			this.init();

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			confirmCate(event){
				console.log(event)
				this.catelabel=event[0].label;
				this.model.reg_cate=event[0].value
			},
			onSelectCate(){
				this.showCate = true;
			},
			confirmAudit() {
				this.showAudit = false;
				this.$Router.back();
			},
			// 选择星期
			saveWeekModal() {
				this.showWeeksModal = false;
				let arr = [];
				let arr2 = [];
				this.weekcheckbox.forEach(item => {
					if (item.checked) {
						arr.push(item.value);
						arr2.push(item.name);
					}
				});
				this.model.openweeks = arr.join(',');
				this.model.weeks = arr2.join(',');
			},

			// 选择星期
			onSelectWeek(index) {
				this.weekcheckbox[index].checked = !this.weekcheckbox[index].checked;
			},

			// 弹窗按钮
			onAuthBtn(path) {
				path &&
					this.$Router.push({
						path: path
					});
				this.showNotice = false;
			},



			onSelect(type) {
				this.selectType = type;
				switch (type) {
					case 'time':
						this.selectShow = true;
						this.selectMode = 'mutil-column';
						this.selectList = this.selectWorkerTime;
						break;
					case 'week':
						this.showWeeksModal = true;
						break;
					case 'cate':
						this.showCate = true;
						break;
					default:
						return;
				}
			},

			// 选择时间
			selectConfirm(e) {
				switch (this.selectType) {
					case 'time':
						this.model.openhours = '';
						e.map((val, index) => {
							this.model.openhours += this.model.openhours == '' ? val.label : ' - ' + val.label;
						});
						break;
					default:
						return;
				}
			},

			// // 勾选同意
			// onAgreement(e) {
			//   this.model.agreement = e.value;
			// },

			// 申请状态
			async init() {
				this.storeCate();
				console.log("isApply");
				let that = this;
				that.$https('category.isApply', {
						token: uni.getStorageSync("token")
					})
					.then(res => {
						console.log("isApply", res);
						if (res.code === 1) {
							res.data && this.authStatus(res.data);
						}
					});
			},
			async storeCate() {
				console.log("storeCate");
				let that = this;
				that.$https('category.storeCate', {
						token: uni.getStorageSync("token")
					})
					.then(res => {
						console.log("storeCate", res);
						if (res.code === 1) {
							that.storeCateList=res.data
							console.log(that.storeCateList)
						}
					});
			},

			// // 跳转门店协议
			// toProtocol() {
			//   this.initStore.protocol && this.jump('/pages/public/richtext', { id: this.initStore.protocol })
			// },

			// 初始化model
			initModel() {
				// 构建星期
				let weeksArr = this.model.openweeks.split(',');
				let weekTextArr = [];
				this.weekcheckbox.forEach(item => {
					if (weeksArr.includes(item.value)) {
						weekTextArr.push(item.name);
						item.checked = true;
					}
				});
				this.model.weeks = weekTextArr.join(',');
			},

			// 状态鉴权
			authStatus(data) {
				console.log(data)
				switch (String(data.check_state)) {
					case '0':
						break;
					case '1':
						this.showAudit = true;
						break;
					case '2':
						uni.showToast({
							title: "审核通过"
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
						break;
					case '3':
						this.model = { ...this.model,
							...data
						};
						this.initModel();
						this.authNotice = {
							img: this.$IMG_URL + '/imgs/commission/auth_reject.png',
							title: '您的申请已被驳回！',
							detail: data.status_msg,
							btnText: '重新申请',
							btnPath: ''
						};
						break;
					default:
				}
			},

			// 申请门店
			applyStore() {
				let that = this;
				this.isFormEnd = false;
				that.$https('category.shopInto', that.model, '提交中...').then(res => {
					this.isFormEnd = true;
					if (res.code === 1) {
						let options = {
							type: "default",
							icon: 'checkmark-circle',
							back: false,
							title: '已提交审核'
						};
						this.$refs.submitAudit.show(options);
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/category'
							});
						}, 2000);

					}
				});
			},

			// 提交
			onSubmit() {
				let that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.applyStore();
					} else {
						this.$u.toast('请完善表单');
					}
				});
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			}
		}
	};
</script>

<style lang="scss">
	.apply-commission-wrap {
		background-color: #F8F8F8;

		.head-box {
			background: url(https://d-duomi.bigchun.com/images/joinbanner1.png) no-repeat;
			background-size: 100% auto;
			height: 594rpx;
		}
	}

	// 表单
	.apply-form {
		width: 95%;
		margin: -36rpx 20rpx 0;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;

		.agreement {
			margin-top: 20rpx;

			.agreement-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #4cb89d;
			}
		}

		.save-btn {
			width: 690rpx;
			line-height: 86rpx;
			background: #D9D9D9 linear-gradient(90deg, #FC5351 0%, #FF6E6D 100%);
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(255, 110, 109, 1);
			border-radius: 43rpx;
			font-weight: 500;
			color: #ffffff;
			margin: 30rpx 0;
		}
	}

	// 星期
	.week-modal {
		.week-modal--head {
			height: 100rpx;
			border-bottom: 1rpx solid $u-border-color;

			.text-cancel {
				color: #ccc;
			}

			.text-green {
				color: #18b566;
			}
		}

		.week-modal--content {
			.week-btn {
				margin-right: 56rpx;
				margin-bottom: 30rpx;

				&:nth-of-type(4n) {
					margin-right: 0;
				}
			}
		}
	}

	// 提示
	.notice-modal {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 612rpx;
		min-height: 658rpx;
		background: #ffffff;
		padding: 30rpx;
		border-radius: 20rpx;

		.img-wrap {
			margin-bottom: 50rpx;

			.notice-img {
				width: 180rpx;
				height: 170rpx;
			}
		}

		.notice-title {
			font-size: 35rpx;
			font-weight: bold;
			color: #46351b;
			margin-bottom: 28rpx;
		}

		.notice-detail {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
			margin-bottom: 50rpx;
		}

		.notice-btn {
			width: 492rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg, #2dae9c, #6bc29e);
			box-shadow: 0 7rpx 11rpx 2rpx rgba(61, 179, 156, 0.34);
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			margin-bottom: 10rpx;
		}

		.back-btn {
			width: 492rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #3ab29c;
			background: none;
		}
	}

	/deep/.u-border-top:after {
		border: none !important;
	}

	.slot-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.audit_img {
			width: 160rpx;
			height: 160rpx;

			.audit_img_top {
				width: 100%;
				height: 100%;
			}
		}

		.audit_title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			line-height: 48rpx;
			margin: 20rpx auto 20rpx;
		}

		.audit_sub_title {
			font-size: 32rpx;
			font-weight: 500;
			color: #999999;
			line-height: 48rpx;
			margin: 10rpx auto 10rpx;
		}
	}
</style>
